<template>
  <div class="content">
   
    <!-- 搜索框区域 -->
    <searchBox></searchBox>
   
    
    <!-- 分类，轮播，个人信息，优惠劵-->
    <div class="home-content">
       <!-- 面包屑 -->
      <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/pagesContent' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>关于我们</el-breadcrumb-item>
        
      </el-breadcrumb>
    </div>
    <div class="zhonghezi">
      <div class="title">
        关于我们
      </div>
      <div class="xiabox">
        <div class="zuobox">
          <div class="row1">梯语云保险”作为领先的数字化供应链平台，旨在整合供应链上下游资源，以大数据驱动的精准决策，打造高效、协同、敏捷的供应链生态为各行业客户创造卓越价值。</div>
          <!-- <div class="row1">{{ appInfo.appBrief||'' }}</div>
          <div class="row2">联系电话：{{ appInfo.appPhone||'' }}</div>
           <div class="row2">联系地址：{{ appInfo.appAddress||'' }}</div> -->
        </div>
        <div class="youbox">
          <img src="@/assets/images/loufang.png" alt="">
        </div>
      </div>
    </div>
     </div> 
   
  </div>
</template>

<script>
import searchBox from "./components/searchBox";


export default {
  name: "goodDetail",//个人中心 
  components: { searchBox},
  data() {
    return {
      items: [], // 存储数据的数组
      loading: false, // 加载状态,
      appInfo:{}, // 应用信息
    };
  },
  mounted() {

    setTimeout(() => {
      var appInfo = localStorage.getItem('appInfo');
      // console.log(appInfo);
      // console.log("*****")
      if (appInfo) {
        this.appInfo = JSON.parse(appInfo);
        this.$set(this.appInfo, 'appBrief', this.appInfo.appBrief.replaceAll('尚诚甄选', ''));
      }
    }, 1000);
  },
  methods: {
    loadMore() {
      if (this.loading) return; // 防止重复加载
      this.loading = true;
      // 模拟加载数据
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({ id: this.items.length + i + 1, value: `Item ${this.items.length + i + 1}` }));
        this.items = [...this.items, ...newItems];
        this.loading = false;
      }, 1000);
    },
    handleScroll(event) {
      const target = event.target; // 确保是在正确的元素上触发事件，例如一个列表容器或div元素。
      if (target.scrollHeight - target.scrollTop <= target.clientHeight) { // 检查是否到达底部或接近底部
        this.loadMore();
      }
    }
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding-bottom: 45px;
  .mianbao{
    max-width: 1200px;
    margin: 16px auto ;
  }
  .home-content{
    padding-top: 1px;
    width: 100%;
    height: calc(100vh - 142px);
    background: #F4F6F8;
    .zhonghezi{
      max-width: 1200px;
      margin: 10px auto 85px;
      padding: 16px;
      box-sizing: border-box;
      background-color: #fff;
      height: 608px;
      overflow: hidden;
     
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.04);
      border-radius: 16px 16px 16px 16px;
      .title{
        font-weight: bold;
        font-size: 36px;
        color: #333333;
        text-align: center;
        margin-bottom: 36px;
      }
     .xiabox{
        display: flex;
        justify-content: center;
        align-items: center; 
        .zuobox{
          width: 400px;
          height: 210px;
         
          font-weight: 400;
          font-size: 16px;
          color: #4F4F4F;
          line-height: 30px;
          margin-right: 30px;
        }
        .youbox{
          width: 488px;
          height: 372px;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
     }
    }
   
  }
 

}
</style>
